<template>
  <div class="categoryList">
      <scroll-view class="head" scroll-x="true" :scroll-left="scrollLeft">
          <div v-for="(item,index) in navData" :key="index"
           :class="[nowIndex === index ? 'active' : '']"
           @click="changeTab(index, item.id)">
              {{item.name}}
          </div>
      </scroll-view>
      <div class="info">
          <p>{{currentNav.name}}</p>
          <p>{{currentNav.front_desc}}</p>
      </div>
      <div class="list" v-if="goodsList.length !== 0">
          <div class="item"
           v-for="(item,index) in goodsList" :key="index"
           @click="goodsDetail(item.id)">
              <img :src="item.list_pic_url" />
              <p class="name">{{item.name}}</p>
              <p class="price">￥{{item.retail_price}}</p>
          </div>
      </div>
      <div class="none" v-else>当前分类暂无数据...</div>
  </div>
</template>

<script>
import { get } from '../../utils'
export default {
    data() {
        return {
            scrollLeft: 0,
            navData: [],
            categoryId: '',
            currentNav: {},
            nowIndex: 0,
            goodsList: []
        }
    },
    mounted() {
        // 获取页面参数
        this.categoryId = this.$root.$mp.query.id
        this.getAllData()
    },
    methods: {
        async getAllData () {
            const data = await get('/category/categoryNav', {
                id: this.categoryId
            })
            // console.log(data)
            this.navData = data.navData
            this.currentNav = data.currentNav
            // 动态添加active样式
            for(let i = 0; i < this.navData.length; i++) {
                const id = this.navData[i].id
                if(id == this.currentNav.id) {
                    this.nowIndex = i
                }
            }

            // 获取商品
            const listData = await get('/goods/goodsList', {
                categoryId: this.categoryId
            })
            // console.log(listData)
            this.goodsList = listData.data
        },
        async changeTab(index, id) {
            this.nowIndex = index
            const listData = await get('/goods/goodsList', {
                categoryId: id
            })
            // console.log(listData)
            this.goodsList = listData.data
            this.currentNav = listData.currentNav

            // 设置导航滚动的可视范围
            if(this.nowIndex > 4) {
                this.scrollLeft = this.nowIndex * 60
            } else {
                this.scrollLeft = 0
            }
        },
        goodsDetail(id) {
            wx.navigateTo({
                url: '/pages/goods/main?id=' + id
            })
        }
    }
}
</script>

<style scoped>
@import './style.css';
</style>